<template>
	<view class="imageSwiperBox">
		<template v-if="imgList.length>1">
			<u-swiper class="swiperBox" height="100%" :transform="transform" :autoplay="autoplay"
				:previousMargin="previousMargin" :nextMargin="nextMargin" :circular="circular" :list="imgList"
				@click="imgClick($event,imgList)" :radius="radius" imgMode="scaleToFill"></u-swiper>
		</template>
		<image class="imageSwiper" :src="imgList[0]" mode="scaleToFill" v-else @click="imgClick(0,imgList)">
		</image>
		<!-- <u-album singleSize="100%" style="height: 100%;" class="imageSwiper" :urls="[imgList[0]]"
			singleMode="scaleToFill"></u-album> -->
	</view>
</template>

<script>
	import {
		isExternal
	} from "@/utils/verify.js"
	export default {
		name: "imageSwiper",
		props: {
			transform: {
				type: [String, Array],
				default: 'scale(0.92)'
			},
			radius: {
				type: [String, Array],
				default: ''
			},
			previousMargin: {
				type: [String, Array],
				default: ''
			},
			nextMargin: {
				type: [String, Array],
				default: ''
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			circular: {
				type: Boolean,
				default: false
			},
			imgs: {
				type: [String, Array],
				default: ''
			},
			previewImage: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				imgList: []
			};
		},
		methods: {
			setImgs(imgs) {
				let list = []
				if (typeof imgs == 'string') {
					list = imgs.split(',')
				} else {
					list = imgs
				}
				this.imgList = list.map(item => this.$setImgUrl(item))
				return list
			},
			imgClick(index, urls) {
				if (this.previewImage) {
					uni.previewImage({
						urls
					})
				} else {
					this.$emit('imgClick', index)
				}

			},
		},
		watch: {
			imgs: {
				handler(newV) {
					this.setImgs(newV)
				},
				deep: true,
				immediate: true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		width: 100%;
		height: 100%;
	}

	.imageSwiperBox {
		width: 100%;
		height: 100%;



		.imageSwiper {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
</style>